<template>
	<view>
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">积分签到</block>
		</cu-custom>
		<view>		
			<image class="signrecord-image" src="../../../static/images/pointsBack.png"></image>
		</view>
    <view class="signrecord-box">
      <view class="flex text-white text-center relative margin-bottom">
        <view class="flex-sub vertical">
          <view class="text-llg margin-bottom-xs">{{todayPoints}}</view>
          <view>今日积分</view>
        </view>
        <view class="flex-sub">
          <view class="text-llg margin-bottom-xs">{{totalPoints}}</view>
          <view>累计积分</view>
        </view>
      </view>
      <view class="bg-white signrecord-bg-1 padding-top-sm">
        <view class="flex justify-center">
          <image src="../../../static/images/signTipsLeft.png" style="width: 66rpx; height: 18rpx; margin: auto 0" />
          <view class="text-center padding-tb text-bold text-black text-spacing margin-lr-sm">已累计签到第 <text class="text-blue text-lg ">{{ signRecord.continuDays }}</text> 天</view>
          <image src="../../../static/images/signTipsRight.png" style="width: 66rpx; height: 18rpx; margin: auto 0" />
        </view>
        <view class="singTips">明日签到可获得{{ nextPoints }}积分</view>
        <view class="flex justify-around steps-bottom margin-top-xl padding-lr-xs">
          <view class="cu-item signItem" v-for="(item,index) in signConfigList" :key="index" :id="'scroll-' + index">
            <view  :class="index>scroll?'':'text-white'">
              <text>{{item.posts}}</text>
            </view>
            <image :src="index > scroll ? '../../../static/images/signBg.png':'../../../static/images/signedBg.png'" />
              <!-- <view class="font-weight text-sm c6">第{{index+1}}天</view> -->
          </view>
        </view>
        <view class="action margin-top-xl">
          <button class="cu-btn round shadow flex signrecord-btn" :class="canSign ? 'bg-'+theme.backgroundColor : 'bg-grey'" @tap="userSign">立即签到</button>
        </view>	
        <view class="cu-modal" :class="showModal?'show':''">
          <view class="cu-dialog dialog-bg">
            <view class="bg-img">
              <view class="cu-bar justify-end text-white">
                <view class="action" @tap="hideModal">
                  <text class="cuIcon-close "></text>
                </view>
              </view>
              <view class="sign-succeed">
                <view><text class="text-red">签到成功！</text></view>
                <view><text class="text-red text-lg text-bold">获得{{signConfig.posts}}积分</text></view>
              </view>
              <view class="action">
                <button class="cu-btn bg-yellow round shadow flex text-white succeed-btn" @tap="hideModal">我知道了</button>
              </view>
            </view>
          </view>
        </view>
        <navigator class="flex margin-top-xl padding-bottom-xl" :key="index" hover-class="none" :url="'/pages/signrecord/signrecord-list/index'">
          <text class="text-sm check-record">查看签到记录</text>
        </navigator>
      </view>
      <view class="margin-top-sm"></view>
      <view class="bg-white signrecord-bg-1">
        <view class="flex justify-center">
          <image src="../../../static/images/signTipsLeft.png" style="width: 66rpx; height: 18rpx; margin: auto 0" />
          <view class="text-center padding-tb text-bold text-black text-spacing margin-lr-sm">活动规则</view>
          <image src="../../../static/images/signTipsRight.png" style="width: 66rpx; height: 18rpx; margin: auto 0" />
        </view>
        <view class="padding-lr padding-bottom text-df text-sm desc" style="line-height:1.6">
          <view>1、100积分可抵扣1元，只可购买商品，不可提现。</view>
          <view>2、签到7天为一周期，用户连续签到7天，共获得245积分。</view>
          <view>3、积分在购买商品时，可用于抵扣现金。 </view>
          <view>4、积分可以累计，长期有效。</view>
          <view>5、积分有效期 积分自发放日起2年内有效,逾期自动失效。</view>
          <view>6、领取的积分可在【我的】-【当前积分】中查看。 7、本活动最终解释权归金象电商平台。</view>
        </view>
      </view>
    </view>
    <view class="padding-tb-xs"></view>
	</view>
</template>
<script>
	const util = require("utils/util.js");
	const app = getApp();
	import api from '@/utils/api';
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				scroll: 0,
				signRecord: {},
				signConfigList: [],
				signConfig: {},
				canSign: false,
        showModal: false,
        totalPoints:uni.getStorageSync('user_info').pointsCurrent || 0,
        nextPoints:0,
        todayPoints:0
			}
    },
		onLoad(option) {
			this.getSignRecord()
		},
		methods: {
			getSignRecord(){
				api.getSignRecord().then(res => {
          let signRecord = res.data;
					let str = signRecord.cumulateDays.toString()
					let j = 4 - str.length
					let beginStr = ''
					for(var i= 0;i<j;i++){
						beginStr = beginStr +'0'
					}
					str = beginStr + str
					signRecord.cumulateDays = str
					this.signRecord = signRecord
					this.scroll = signRecord.continuDays - 1
					let updateTime = this.$moment(this.signRecord.updateTime).format("YYYY-MM-DD")
					let curDate = this.$moment().format("YYYY-MM-DD")
					if(curDate != updateTime){
						this.canSign = true
					}else{
            this.canSign = false
					}
			    this.signConfigPage()
				});
			},
			signConfigPage(){
				api.signConfigPage({
					searchCount: false,
					current: 1,
					size: 100,
					ascs: 'sort'
				}).then(res => {
          this.signConfigList = res.data.records;
          if(this.signRecord.continuDays != 7) this.nextPoints = res.data.records[this.signRecord.continuDays].posts
          else this.nextPoints = res.data.records[0].posts
          if(!this.canSign) this.todayPoints = res.data.records[this.signRecord.continuDays-1].posts
				});
			},
			userSign(){
        let that = this
        api.wxTemplateMsgList({
					enable: '1',
					useTypeList: ['7']
				}).then(res => {
					let tmplIds = [];
					res.data.forEach(item => {
						tmplIds.push(item.priTmplId);
					});
					uni.requestSubscribeMessage({
						tmplIds: tmplIds,
						success(res) {
              if(that.canSign){
                api.userSign().then(res => {
                  that.signConfig = res.data
                  that.getSignRecord()
                  that.signConfigPage()
                  that.showModal = true
                });
              }
						}
					});
				});
			},
			hideModal(){
				this.showModal = false
			}
		}
	}
</script>

<style>
	.signrecord-bg{
		height: 1000rpx;
	}
	
	.signrecord-image{
		width: 750rpx;
		height: 650rpx;
	}
	
	.personal-information{
		margin-top: -250rpx;
	}
	
	.head{
		margin:40rpx auto 0 auto;
	}
	
	.number-bg-top{
		width: 80rpx;
		height: 60rpx;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		background-color: #e7e1dd;
	}
	
	.number-bg-bottom{
		width: 80rpx;
		height: 60rpx;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
		background-color: #ffffff;
	}
	
	.number-day{
		position: absolute;
		font-size: 3em;
		margin: 10rpx 0rpx 0rpx -22rpx;
	}
	
	.font-weight{
		font-weight: 300;
	}
	.signrecord-bg-1{
		width: 94%;
		margin: 0 auto;
		border-radius: 15rpx;
    position: relative;
	}
	
	.integral{
		width: 384rpx;
		height: 322rpx;
		margin: -150rpx auto 0rpx auto;
	}
	
	.signrecord-day{
		overflow: scroll;
	}
	
	.signrecord-btn{
		width: 90%;
		height: 70rpx;
		margin: auto;
		box-shadow:0px 5px 10px #f9ccc1;
	}
	
	.check-record{
		margin: auto;
		font-weight: 300;
	}
	
	.dialog-bg{
		background-color: unset;
	}
	
	.bg-img{
		background-image: url('http://minio.joolun.com/joolun/1/material/bbb479db-eb6a-4245-b799-e95040cdd13c.png');
		height:600rpx;
	}
	
	.sign-succeed{
		margin-top: 230rpx;
	}
	
	.succeed-btn{
		width: 50%;
		margin: 50rpx auto 0 auto;
	}
  .text-spacing{
    letter-spacing: 1px;
  }
  .singTips{
    width: 422rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: rgba(22, 132, 251, 0.1);
    border-radius: 37rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #1684FB;
    margin: 0 auto;
  }
  .c6{
    color: #666666;
  }
  .signItem{
    position: relative;
    width: 82rpx;
    height: 108rpx;
    z-index: 2;
    color: #999999;
  }
  .signItem image{
    position:absolute;
    width: 82rpx;
    height: 108rpx;
    z-index: 1;
    top: 0;
    left: 0;
  }
  .signItem>view{
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 24rpx;
    font-weight: 600;
  }
  .signItem>view text{
    position: relative;
    top: 70rpx;
  }
  .signrecord-box{
    margin-top: -600rpx;
  }
  .relative{
    position: relative;
  }
  .text-llg{
    font-size: 48rpx;
  }
  .vertical{
    position: relative;
  }
  .vertical::before{
    content: '';
    height: 60%;
    width: 1px;
    background: #ffffff;
    right: 0;
    top: 20%;
    position: absolute;
  }
</style>
